<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-创建和添加节点</title>
</head>
<body>
    <ul>
        <li>王一博</li>
        <li class="li1">肖战</li>
        <li class="li2">剑圣</li>
    </ul>
    <ol></ol>
    <script>
        /* 
            属性操作
            样式操作
            元素查询
            父子兄节点
            删除元素
            修改元素内容
        */

        // 1. 创建元素
        let li1 = document.createElement('li');
        li1.innerHTML = '孙红雷';
        let li2 = document.createElement('li');
        li2.innerHTML = '张杰';
       
        let ul = document.querySelector('ul');
        
        // 2. 追加节点
        ul.appendChild(li1);
        ul.appendChild(li2);
       

        // 3. 在指定位置添加元素
        // ul.insertBefore(li1,ul.children[2]);
        // ul.insertBefore(li2,ul.children[1]);
        // 第一次添加后 第二次再添加索引号会变化 
    </script>
</body>
</html>